<template>
  <!-- 倒计时组件 -->
  <div class="downTime-wrapper"
       v-if="isShow">
    <Icon type="shuaxin" />
    <!-- 这里是显示还未结束时的内容，这里只是我这得布局，你可以随意。 -->
    <div class="time">
      <!-- <span class="hour">{{myDay}}</span> : -->
      <!-- <span class="hour">{{myHours}} : </span> -->
      <span class="minute">{{myMinutes}} : </span>
      <span class="second secondcolor">{{mySeconds}}</span>
    </div>
    <div>后刷新</div>
  </div>
</template>

<script>
export default {
  name: 'downTime',
  data () {
    return {
      isShow: false, // 控制显示结束或还未结束显示的内容
      clocker: '', // 结束后显示的内容
      timeObj: null, // 时间对象,下方会用到
      myDay: 0, // 我定义来接收计算出来的 天 的
      myHours: 0, // 我定义来接收计算出来的 小时 的
      myMinutes: 0, // 我定义来接收计算出来的 分钟 的
      mySeconds: 0, // 我定义来接收计算出来的 秒钟 的
      go: ''
    }
  },
  methods: {
    timeFunction (obj) {
      this.isShow = obj.typeTime
      // 计算时间差
      let timeLag = (obj.endTime - obj.startTime) / 1000
      // 判断当前是否时分秒的值是否大于10
      let add = num => {
        return num < 10 ? '0' + num : num
      }
      let timeFunction = () => {
        let time = timeLag--
        this.timeObj = { // 时间对象
          seconds: Math.floor(time % 60),
          minutes: Math.floor(time / 60) % 60,
          hours: Math.floor(time / 60 / 60) % 24,
          days: Math.floor(time / 60 / 60 / 24)
        }
        // 计算出时分秒
        this.myDay = `${add(this.timeObj.days)}`
        this.myHours = `${add(this.timeObj.hours)}`
        this.myMinutes = `${add(this.timeObj.minutes)}`
        this.mySeconds = `${add(this.timeObj.seconds)}`
        // 当时间差小于等于0时,停止倒计时
        if (time <= 0) {
          this.clocker = obj.endMsg || '结束'
          this.clearTimeFunction(obj.typeTime)
        }
      }
      if (obj.typeTime) {
        timeFunction()
        this.go = setInterval(() => {
          timeFunction()
        }, 1000)
      }
    },
    clearTimeFunction (e) {
      clearInterval(this.go)
      if (e) {
        this.$emit('setIntervalLoading', e)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.downTime-wrapper {
  display: flex;
  align-items: center;
  .time {
    margin-left: 5px;
  }
  .second {
    color: #ccc;
    font-size: 12px;
    font-weight: bold;
  }
  .clocker {
    font-weight: initial;
  }
  .secondcolor {
    color: #ed4014;
  }
}
</style>
